<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../vue.js"></script>
    <title>监视属性--天气案例</title>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>

      <!-- <button @click="isHot=!isHot;a++">切换天气</button> -->
      <!-- 不配置methods，直接在click里面写简单的语句，(个人)强烈不推荐 -->
      <button @click="window.alert(123)">点我弹窗</button>
      <!-- 模板中变量/函数 都会去app上找，再去vue的原型上找，如果还没找到，那就结束了 -->
    </div>
    <script>
      /* 
      监视属性watch：
      1.被监视的属性变化时，回调函数自动调用，进行相关操作
      2.监视的属性必须存在，才能监视！！！！！！！
      3.有两种写法
          1. new Vue的时候，传入watch配置项
          2. 使用 app.$watch 监视
      
      */
      //监视属性，监视某个属性值的变化并做点什么
      var app = new Vue({
        el: "#app",
        data: {
          a: 1,
          isHot: true,
          // 这样就能用window了
          window,
          // bb: "",
        },
        computed: {
          info() {
            return this.isHot ? "很热，要吃小雪糕" : "很凉快，注意不要感冒";
          },
        },
        // //监视属性的配置
        watch: {
          //监视属性简写 配置项中不需要immediate 和 deep才能简写
          isHot(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue);
          },
          // 完整写法你要监视的属性
          // isHot: {
          //   //vue初始化的时候就调用一下
          //   //立即监视
          //   immediate: true,
          //   //这个handler什么时候调用？isHot修改的时候自动调用
          //   //对某个属性进行检测，然后对比，最后走一些逻辑
          //   handler(newValue, oldValue) {
          //     console.log("isHot被修改了", newValue, oldValue);
          //     // this.bb = this.isHot
          //     //   ? "很热，要吃小雪糕"
          //     //   : "很凉快，注意不要感冒";
          //   },
          // },
          //isHot可以监视，那info怎么监视？
          // info: {
          //   immediate: true,
          //   //这个handler什么时候调用？isHot修改的时候自动调用
          //   //对某个属性进行检测，然后对比，最后走一些逻辑
          //   handler(newValue, oldValue) {
          //     console.log("info被修改了", newValue, oldValue);
          //   },
          // },
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
      });
      //第二种监视方法
      // app.$watch("isHot", {
      //   immediate: true,
      //   handler(newValue, oldValue) {
      //     console.log("isHot被修改了", newValue, oldValue);
      //   },
      // });
      /* 
      两种方法用那个？
      1.在创建的实例的时候，我非常的老手了，已经知道要监视谁，那就直接在Vue的构造函数里面写watch
      2.如果创建实例的时候，我很小白，或者后续需求有变动，需要我监视某个东西，那就用$watch
      */
    </script>
  </body>
</html>
